<!--
 /**
 * Author: hongChengHao
 * Date: 2022-07-23 10:51
 * Desc: 邀请用户注册盒子
 */
-->
<template>
  <view class="invite-box">
    <slot name="title"></slot>
    <view class="invite-box__invites">
      <view
        class="invite-box__invite"
        v-for="(item, index) in list"
        :key="index"
        @click="onInvite(index)"
      >
        <zm-image
          v-if="item[idKey]"
          style="width: 100%; height: 100%"
          :src="item[srcKey]"
        />
        <u-icon v-else name="plus" color="#51CFF1" size="16" bold></u-icon>
      </view>
    </view>
  </view>
</template>
<script>
  import ZmImage from '@/commons/ZmImage/index.vue'
  export default {
    name: 'InviteBox',
    components: { ZmImage },
    props: {
      list: {
        type: Array,
        default: () => {
          return []
        }
      },
      srcKey: {
        //图像key
        type: String,
        default: ''
      },
      idKey: {
        //主键
        type: String,
        default: ''
      }
    },
    data() {
      return {}
    },
    methods: {
      onInvite(index) {
        this.$emit('click', index)
        console.log('第' + index + '被点击了')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .invite-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    &__invites {
      display: flex;
      flex-direction: row;
    }
    &__invite {
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 35rpx;
      width: 70rpx;
      height: 70rpx;
      background: #ffffff;
      border: 1rpx dashed #51cff1;
      // box-shadow: inset 0 0 1rpx 1rpx rgba($color: #fff, $alpha: 1);
      border-radius: 26rpx;
      box-sizing: border-box;
    }
    &__has-invite {
      border: unset;
    }
    &__invite:nth-last-of-type(1) {
      margin-right: 0;
    }
  }
</style>
